<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body{width:100%;height:100%;margin:0;padding:0;}
body{font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft Yahei",Helvetica,Arial,sans-serif;}
p,ul,h2,h3,h4,img,dt,dd{margin:0;padding:0}
a{text-decoration:none;color:#666}ul{list-style:none}
header{height:100px;background-color:#fff;border-bottom:1px solid #f1f1f1}
	.account_layer{position:absolute;right:1%;top:3%;z-index:1}
		.account_layer p{height:50px;line-height:50px;background-color:#f1f1f1;color:#999;padding:0 10px;}
		.ul{background-color:#fff;position:absolute;width:260px;top:50px;right:1px;border:1px solid #ddd;z-index:20;padding:10px;display:none}
		.ul img{width:100px;height:100px;float:left}
		.ul ul{display:inline-block;width:150px;margin-left:10px;}
		.ul ul li{display:inline-block;width:100%;height:2em;line-height:2em;text-indent:20px;}
		.ul ul li:hover{background-color:#f1f1f1}
main{width:100%;display:table-row;}
	aside{width:270px;display:inline-block;border-right:1px solid #f1f1f1;float:left}
		aside h3,aside dt{height:50px;line-height:50px;text-indent:30px;}
		aside h3{border-bottom:1px solid #f1f1f1}
		aside dt{cursor:pointer}
		aside dd{display:none;background-color:#f6f6f6;text-indent:50px;}
		aside dd a{height:35px;line-height:35px;display:block}
	#itemset{background-color:#fff;width:1080px;display:inline-block;float:left}
		nav{height:50px;line-height:50px;border-bottom:1px solid #f1f1f1;position:relative;}
			nav h2{text-indent:50px;width:82%;display:inline-block;}
			#right_float_menu{width:15%;display:inline-block}
				#right_float_menu a{display:inline-block;padding:0px 8px;border-right:1px solid #fff}
		#itemtable{width:inherit;padding-left:1%;}
			.item{display:inline-block;width:30%;margin:1% 1% 0 0;border:1px solid #ddd;position:relative;float:left}
				.item_cover{background-color:rgba(0,0,0, .5);width:100%;text-align:center;height:150px;}
				.item h4{height:50px;line-height:50px;border-top:1px solid #ddd;text-indent:50px;}
				.item_panel{position:absolute;bottom:15px;right:10px;font-size:10px;}
/*插件需要的样式定义*/
.apo_menu{display:none;}.apo_menu a:hover{background-color:#f1f1f1}
/*测试需要的样式定义*/
.wrap_ss_subject{position:relative;z-index:3;width:82%;display:inline-block}
	.wrap_ss_subject div{width:300px;height:auto;background-color:#fff;border:1px solid #f00;}
		.wrap_ss_subject div a{display:block;padding:0.5em 0;text-indent:2em;}
.item_panel .apo_menu{border:1px solid #eee;background-color:#fff;}
	.item_panel .apo_menu ul{width:100px;}
		.item_panel .apo_menu li{padding:0.5em 0;text-indent:20px;}
/*测试点*/
.account_layer p,nav h2{cursor:pointer}
</style>
</head>

<body>
<header>
    <a href="javascript:;"><img src="logo.png" /></a>
    <div class="account_layer">
        <p>xiaofanku@live.cn</p>
        <div class="ul">
            <img src="avatar.100x100.jpg" />
            <ul>
            <li><a href="javascript:;">会员中心</a></li>
            <li><a href="javascript:;">站内消息</a></li>
            <li><a href="javascript:;">退出</a></li>
            </ul>
        </div>
    </div>
</header>

<main>
    <aside>
        <h3>右侧菜单</h3>
        <dl>
            <dt>主分类1</dt>
            <dd>
                <a href="javascript:;">主分类1的子类1</a>
                <a href="javascript:;">主分类1的子类2</a>
                <a href="javascript:;">主分类1的子类3</a>
                <a href="javascript:;">主分类1的子类4</a>
                <a href="javascript:;">主分类1的子类5</a>
                <a href="javascript:;">主分类1的子类6</a>
            </dd>
        </dl>
        <dl>
            <dt>主分类Two</dt>
            <dd>
                <a href="javascript:;">主分类Two Of child menu a</a>
                <a href="javascript:;">主分类Two Of child menu b</a>
                <a href="javascript:;">主分类Two Of child menu c</a>
                <a href="javascript:;">主分类Two Of child menu d</a>
                <a href="javascript:;">主分类Two Of child menu e</a>
                <a href="javascript:;">主分类Two Of child menu f</a>
            </dd>
        </dl>
        <dl>
            <dt>主分类3</dt>
            <dd>
                <a href="javascript:;">主分类3的子类1</a>
                <a href="javascript:;">主分类3的子类2</a>
                <a href="javascript:;">主分类3的子类3</a>
                <a href="javascript:;">主分类3的子类4</a>
                <a href="javascript:;">主分类3的子类5</a>
                <a href="javascript:;">主分类3的子类6</a>
            </dd>
        </dl>
        <dl>
            <dt>主分类Four</dt>
            <dd>
                <a href="javascript:;">主分类Four Of child menu a</a>
                <a href="javascript:;">主分类Four Of child menu b</a>
                <a href="javascript:;">主分类Four Of child menu c</a>
                <a href="javascript:;">主分类Four Of child menu d</a>
                <a href="javascript:;">主分类Four Of child menu e</a>
                <a href="javascript:;">主分类Four Of child menu f</a>
            </dd>
        </dl>
    </aside>
    <section id="itemset">
        <nav>
            <h2 id="page_subject">这是一个页面的标题</h2>
            <div id="right_float_menu">
                <a href="javascript:;">分享</a><a href="javascript:;">回复</a><a href="javascript:;">删除</a>
            </div>
        </nav>
        <div id="itemtable">
        <div class="item">
            <div class="item_cover"></div>
            <h4>条目的标题1</h4>
            <div class="item_panel">
                <a href="javascript:;">操作</a>
            </div>
        </div>
        <div class="item">
            <div class="item_cover"></div>
            <h4>条目的标题Two</h4>
            <div class="item_panel">
                <a href="javascript:;">操作</a>
            </div>
        </div>
        <div class="item">
            <div class="item_cover"></div>
            <h4>条目的标题3</h4>
            <div class="item_panel">
                <a href="javascript:;">操作</a>
            </div>
        </div>
        <div class="item">
            <div class="item_cover"></div>
            <h4>条目的标题Four</h4>
            <div class="item_panel">
                <a href="javascript:;">操作</a>
            </div>
        </div>
        <div class="item">
            <div class="item_cover"></div>
            <h4>条目的标题5</h4>
            <div class="item_panel">
                <a href="javascript:;">操作</a>
            </div>
        </div>
        <div class="item">
            <div class="item_cover"></div>
            <h4>条目的标题Six</h4>
            <div class="item_panel">
            	<a href="javascript:;">操作</a>
            </div>
        </div>
        </div>
    </section>
</main>
<!-- 片段源头-->
<div id="segment_set" style="display:none">
    <div id="ss_subject">
        <a href="javascript:;">互联网新闻</a><a href="javascript:;">腾讯科技</a><a href="javascript:;">新浪体育</a>
    </div>
    <div id="ss_tools">
        <ul>
            <li><a href="javascript:;">关注</a></li><li><a href="javascript:;">订阅</a></li><li><a href="javascript:;">退订</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript" charset="UTF-8" src="http://libs.baidu.com/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" charset="UTF-8" src="jquery.apoMenu.js"></script>
<script type="text/javascript">
    $.apoMenu('.account_layer>p',{style:'drop',eventype:'inout',isDom:true,box:'.account_layer',menu:'.ul'});
    $.apoMenu('#page_subject',{style:'collapse',eventype:'click',isDom:false,box:'.wrap_ss_subject',menu:'#ss_subject'});
    $.apoMenu('.item_panel>a',{style:'pop',eventype:'inout',isDom:false,box:'.item_panel',menu:'#ss_tools'});
    $.apoMenu('aside dt',{style:'collapse',eventype:'click',isDom:true,box:'dl',menu:'dd'});
</script>
</body>
</html>
